@import '../../../style/common.less';

.banner {
  &-wrapper {
    .home-main-content();

    padding: 148px 0 40px;
  }

  &-content {
    display: flex;
    align-items: center;

    &-left {
      width: calc(100% - 800px);
      margin-top: -20px;
      min-width: 222px;
    }

    &-right {
      width: 755px;
    }
  }

  &-footer {
    margin-top: 100px;
  }
}

@media screen and (max-width: 768px) {
  .banner {
    &-wrapper {
      padding: 40px 20px 52px;
    }

    &-content {
      flex-direction: column;

      &-left {
        width: 100%;
        margin-top: 0;
        min-width: unset;
      }

      &-right {
        width: 100%;
        margin-top: 54px;
      }
    }

    &-footer {
      margin-top: 40px;
    }
  }
}
